<template>
  <div>
    <el-tabs v-model="activeTab" @tab-change="fetchData">
      <el-tab-pane label="未审核" name="pending"></el-tab-pane>
      <el-tab-pane label="已审核" name="approved"></el-tab-pane>
    </el-tabs>

    <el-table :data="verificationList" border style="width: 100%">
      <el-table-column prop="applyDate" label="申请日期" width="120" />
      <el-table-column prop="userId" label="用户ID" width="100" />
      <el-table-column prop="username" label="用户名" width="120" />
      <el-table-column prop="companyName" label="公司名称" width="150" />
      <el-table-column prop="workDuration" label="工作时长" width="120" />
      <el-table-column prop="statisticalTools" label="统计工具" width="150">
        <template #default="scope">
          <div v-for="tool in scope.row.statisticalTools" :key="tool">
            {{ tool }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessDescription"
        label="业务介绍"
        width="200"
      />
      <el-table-column label="证书图片" width="120">
        <template #default="scope">
          <img
            :src="scope.row.certificateImage"
            alt="证书图片"
            style="width: 60px; height: auto; cursor: pointer"
            @click="showImage(scope.row.certificateImage)"
          />
        </template>
      </el-table-column>

      <!-- 审核状态和失败原因列（仅在已审核时显示） -->
      <el-table-column
        v-if="activeTab === 'approved'"
        prop="isApproved"
        label="审核状态"
        width="120"
      >
        <template #default="scope">
          <span>{{ scope.row.isApproved ? "通过" : "未通过" }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="activeTab === 'approved'"
        prop="rejectionReason"
        label="失败原因"
        width="200"
      >
        <template #default="scope">
          <span>{{ scope.row.rejectionReason || "无" }}</span>
        </template>
      </el-table-column>

      <!-- 操作列 -->
      <el-table-column label="操作" width="180">
        <template #default="scope">
          <!-- 未审核状态下的按钮 -->
          <template v-if="activeTab === 'pending'">
            <el-button
              type="success"
              @click="approveVerification(scope.row.userId)"
            >
              通过
            </el-button>
            <el-button
              type="danger"
              @click="openRejectDialog(scope.row.userId)"
            >
              不通过
            </el-button>
          </template>
          <!-- 已审核状态下的按钮 -->
          <template v-else>
            <el-button
              v-if="scope.row.isApproved"
              type="danger"
              @click="openRejectDialog(scope.row.userId)"
            >
              不通过
            </el-button>
            <el-button
              v-else
              type="success"
              @click="approveVerification(scope.row.userId)"
            >
              重新通过
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>

    <!-- 放大图片的对话框 -->
    <el-dialog
      v-model="dialogVisible"
      width="50%"
      :before-close="handleClose"
      :close-on-click-modal="false"
    >
      <img :src="selectedImage" alt="放大图片" style="width: 100%" />
    </el-dialog>

    <!-- 拒绝原因输入框 -->
    <el-dialog
      v-model="rejectDialogVisible"
      title="输入拒绝原因"
      :before-close="handleRejectDialogClose"
    >
      <el-input
        type="textarea"
        v-model="rejectionReason"
        placeholder="请输入拒绝的原因"
        rows="4"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="rejectDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitRejectionReason">
          提交
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getPendingTechnicalVerification,
  getApprovedTechnicalVerification,
  approveTechnicalVerification,
  rejectTechnicalVerification,
} from "@/api/audit";

export default {
  name: "TechnicalVerification",
  data() {
    return {
      activeTab: "pending",
      verificationList: [],
      dialogVisible: false,
      selectedImage: "",
      rejectDialogVisible: false,
      rejectionReason: "",
      currentUserId: null, // 当前操作的用户ID
    };
  },
  methods: {
    // 根据tab加载数据
    fetchData() {
      this.verificationList = [];
      const apiMethod =
        this.activeTab === "pending"
          ? getPendingTechnicalVerification
          : getApprovedTechnicalVerification;

      apiMethod().then((response) => {
        if (response.data) {
          this.verificationList = response.data.map((item) => ({
            applyDate: new Date(
              item.technicalVerification.CreatedAt
            ).toLocaleString(),
            userId: item.technicalVerification.userId,
            username: item.user.username || "未知",
            companyName: item.technicalVerification.companyName,
            workDuration: item.technicalVerification.workDuration,
            statisticalTools:
              item.technicalVerification.statisticalTools.split(","),
            businessDescription: item.technicalVerification.businessDescription,
            certificateImage:
              import.meta.env.VITE_BASE_API +
              item.technicalVerification.certificateImage,
            isApproved: item.technicalVerification.isApproved,
            rejectionReason: item.technicalVerification.rejectionReason || "",
          }));
        }
      });
    },
    // 审核通过
    approveVerification(userId) {
      approveTechnicalVerification({ userId }).then(() => {
        this.fetchData();
        this.$message.success("已通过审核");
      });
    },
    // 显示拒绝原因输入框
    openRejectDialog(userId) {
      this.currentUserId = userId;
      this.rejectDialogVisible = true;
    },
    // 提交拒绝原因
    submitRejectionReason() {
      if (!this.rejectionReason) {
        this.$message.error("请填写拒绝原因");
        return;
      }
      rejectTechnicalVerification({
        userId: this.currentUserId,
        rejectionReason: this.rejectionReason,
      }).then(() => {
        this.fetchData();
        this.rejectDialogVisible = false;
        this.$message.error("已驳回审核");
      });
    },
    // 显示放大的图片
    showImage(imageUrl) {
      this.selectedImage = imageUrl;
      this.dialogVisible = true;
    },
    // 关闭图片对话框
    handleClose(done) {
      this.dialogVisible = false;
      done();
    },
    // 关闭拒绝原因输入框
    handleRejectDialogClose() {
      this.rejectionReason = "";
    },
  },
  mounted() {
    this.fetchData();
  },
};
</script>
